<template>
  <div class="login_container">
    <div class="log">
      <img src="https://likede2-admin.itheima.net/img/logo.595745bd.png" alt="">
    </div>
    <div class="form">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
        <el-form-item prop="mobile">
          <el-input v-model="ruleForm.loginName" placeholder="请输入账号" prefix-icon="el-icon-mobile-phone" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="ruleForm.password" :type="isPwd? 'password' : 'text'" placeholder="请输入密码" prefix-icon="el-icon-lock">
            <template slot="suffix">
              <i class="el-icon-view" style="font-size: 22px; margin-top: 10px; margin-right: 5px;" @click="isPwd = !isPwd" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input v-model="ruleForm.code" placeholder="请输入验证码" prefix-icon="el-icon-milk-tea">
            <template slot="suffix">
              <img style="height: 40px;" :src="src" alt="" @click="openCode">
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="sumit_btn" type="primary" @click="submit">立即创建</el-button>
        </el-form-item>
        <div style="font-size: 14px;color: #fd336e;">仅用于IT培训教学使用，为保障您的个人信息安全，请勿向平台录入任何个人敏感信息（如手机号、身份证号等）！</div>
      </el-form>

    </div>
  </div>
</template>
<script>
import { loginCodeRequest, loginRequest } from '@/api/user'
export default {
  name: '',
  data() {
    return {
      rules: {
        loginName: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { pattern: /^....$/, message: '验证码格式错误,请重新输入', trigger: 'blur' }
        ]
      },
      ruleForm: {
        loginName: 'admin',
        password: 'admin',
        code: '',
        clientToken: '',
        loginType: 0
      },
      isPwd: true,
      isCode: 10,
      src: ''

    }
  },
  computed: {
  },
  created() {
    this.ruleForm.clientToken = Date.now() + ''
    this.getCode(this.ruleForm.clientToken)
  },
  methods: {
    async getCode(timer) {
      const res = await loginCodeRequest(timer)
      const blob = new Blob([res], { type: 'image/jpeg' })
      const url = window.URL.createObjectURL(blob)
      this.src = url
      console.log(url)
      // console.log(res)
    },
    openCode() {
      this.getCode(Date.now())
    },
    submit() {
      this.$refs.ruleForm.validate(async(valid) => {
        if (valid) {
          console.log(this.ruleForm)
          await this.$store.dispatch('user/getLogin', this.ruleForm)
          this.$router.push('/')
        }
      })
    }
  }
}
</script>
<style lang='scss'  scoped>
.login_container{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url('../../assets/login/login.png');

  .log{
    position: absolute;
    width: 100px;
    height: 100px;
    top: 21%;
    left: 50%;
    margin-left: -50px;
    border-radius: 50%;
    img{
      width: 100%;
      height: 100%;
    }
  }

  .form{
    width: 450px;
    background-color: #fff;

    .el-form{
      padding: 50px 25px;
    }
  }

  .sumit_btn{
    width: 100%;
    background-color: #6c7eef;
    border: 1px solid #6c7eef;
  }
}
</style>
